<template>
  <div class="wrap">
    <TypesList :search="handleSearch" v-model:form="searchParams" :showall="false"></TypesList>
    <div class="wrap_right">
      <BaseForm
        ref="searchForm"
        type="search"
        :items="formItems"
        v-model:form="searchParams"
        @search="handleSearch"
      >
        <template #suffix-button>
          <el-button type="primary" @click="handleEdit({})">
            <el-icon><Plus /></el-icon>
            添加
          </el-button>
        </template>
      </BaseForm>
      <div class="table">
        <el-table
          ref="baseTable"
          border
          v-loading="loading"
          element-loading-text="加载中..."
          :data="tableData"
        >
          <el-table-column prop="dictionaryName" label="名称" />
          <el-table-column prop="dictionaryKey" label="键" />
          <el-table-column prop="dictionaryValue" label="值" />
          <el-table-column prop="sortNum" label="排序数字" />
          <el-table-column label="操作" fixed="right" width="100">
            <template #default="scope">
              <el-link
                :underline="false"
                link
                type="primary"
                size="small"
                @click.prevent="handleEdit(scope.row)"
                >编辑</el-link
              >

              <el-link
                :underline="false"
                link
                type="danger"
                size="small"
                @click.prevent="handleDel(scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
    ></EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from './EditForm.vue'
import TypesList from '@/components/LeftTree/TypesList/index.vue'
import openMsgBox from '@/hooks/messageBox.js'
import { commonService } from '@/api/common'
const tableData = ref([])
const formItems = ref([
  {
    name: '名称',
    key: 'dictionaryName',
    type: 'input',
  },
  // {
  //   name: '键',
  //   key: 'dictionaryKey',
  //   type: 'input',
  // },
  // {
  //   name: '值',
  //   key: 'planCateId',
  //   type: 'input',
  // },
])
const loading = ref(false)
const searchParams = ref({
  dictionaryName: '',
  dictionaryKey: '',
  dictionaryId:'',
})
const baseTable = ref(null)
const handleSearch = () => {
  getData()
}
const item = ref({
  parentId: '',
})
const getData = () => {
  loading.value = true
  commonService
    .getListByParentKeyList({ data: searchParams.value })
    .then((res) => {
      loading.value = false
      tableData.value = res.data
    })
    .catch(() => {
      loading.value = false
    })
}

const visibleEditForm = ref(false)
const handleEdit = (row) => {
  console.log('row==',row)
  item.value = { ...row, parentId: searchParams.value.dictionaryId }
  visibleEditForm.value = true
}
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return commonService.delDictionary({
        data: row.dictionaryId,
      })
    },
    () => {
      handleSearch()
    }
  )
}
</script>

<style lang="less" scoped></style>
